<template>
	<headers></headers>
	<notice :notice.sync="notice"></notice>
	<div class="container">
        <div class="row login-form">
            <div class="col-md-4 col-md-offset-4">
                <div class="panel paenl-default">
                    <div class="panel-body">
                        <div class="form-top">
                            <div class="form-top-left">
                                <h3 class="mytitle">登陆</h3>
                            </div>
                        </div>
                        <div class="form-body">
                        	<validator name="login">
                            <form class="col-md-4" novalidate>
                                <div class="form-group">
                                    <label class="sr-only" for="form-username">用户名</label>
                                    <input type="email" class="form-control" placeholder="请输入邮箱"
                                           v-model="curInput.username"
                                           @blur="onBlur('username')"
                                           v-validate:username="{
                                               required: {rule: true, message: '请输入用户名'},
                                               email: {rule: true, massage: ''}
                                           }">
                                </div>
                                <div class="form-group">
                                    <label class="sr-only" for="form-username">密码</label>
                                    <input type="password" class="form-control" placeholder="请输入密码"
                                           v-model="curInput.psw"
                                           @blur="onBlur('psw')"
                                           v-validate:psw="{
                                               required: {rule: true, message: '请输入密码'}
                                           }">
                                </div>
                                <div class="checkbox">
                                    <label>
                                        <input  type="checkbox" id="form-remember" v-model="curInput.remember"> 记住我
                                    </label>
                                    <a class="pull-right forget" href="###">忘记密码</a>
                                </div>
                                <input type="submit" id="register" class="btn btn-primary login-btn" value="登陆" alt="登陆" @click="login" :disabled="!$login.valid"/>
                            </form>
                        	</validator>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-body login-bottom">
                        <p>没有账号? <a href="/Account/register.html"> 点击注册</a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Headers from '../../Component/Header/Header.vue';
    import Notice from '../../Component/Notice/Notice';
    import auth from '../../Component/Auth/auth.js';

    export default {
        created: function() {
            var user = auth.getUserAndPsw();
            if (user) {
                this.curInput = {username: user.id, psw: user.psw, remember: true};
                /*this.username = user.id;
                this.psw = user.psw;*/
                this.isTeacher = user.isTeacher;
            }
        },
        data () {
            return {
                curInput: {username: '', psw: '', remember: false},
                stuBak: {},
                teaBak: {},
                isTeacher: true,
                notice: {type: 0, msg: ""}
            }
        },
        methods: {
            login: function(e) {
                e.preventDefault();
                if (!this.$login.errors) {
                    this.$http.post('/index/login',
                        {number: this.curInput.username, password: this.curInput.psw, remember: this.curInput.remember}).then(function(resp) {
                                if (resp.data.status === 1) {
                                    window.location.href = "/Index/index.html"
                                } else {
                                    this.notice = {type: 0,msg: resp.data.message}
                                }
                        }, function(resp) {
                            // error callback
                            this.notice = {type: 0,msg: resp.statusText}
                        })
                } else {
                    this.notice = {type: 0,msg: this.$login.errors[0].message};
                }
            },
            changState: function() {
                if (this.isTeacher) {
                    this.teaBak = this.curInput;
                    this.curInput = Object.assign({}, this.stuBak);
                } else {
                    this.stuBak = this.curInput;
                    this.curInput = Object.assign({}, this.teaBak);
                }
                this.isTeacher = !this.isTeacher;
            },
            onBlur: function(field) {
                if (field === 'username')
                    this.psw = '';
                this.notice = {type: 0,msg: this.$login[field].errors&&this.$login[field].errors[0].message};
            }
        },
        components: {
            Notice,
            Headers
        },
        validators: {
            email: {
                message: '请输入正确的邮箱地址',
                check: function (val) {
                    return /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(val)
                  }
            }
        }
    }
</script>

<style scoped>
.login-form {
    margin-top: 135px;
}

.form-top {
    overflow: hidden;
    padding: 0px 15px;
}
.form-top-left {
    float: left;
}

.form-top-left h3{
    margin-top: 10px;
    float: left;
}

.form-top-right {
    margin-top: 10px;
    float: right;
}

.form-top-right button.btn{
    color: #818181;
}

.form-top-right button.btn:focus{
    outline: 0;
    text-decoration: none;
}

.form-top-right button.btn:hover{
    opacity: 0.6;
    text-decoration: none;
}

.form-body {
    overflow: hidden;
    padding: 10px 0px;
}

.form-body form{
    width: 100%;
}

.form-body .login-btn{
    width: 100%;
}

.form-body .form-group {
    margin-bottom: 18px;
}

.forget {
    color: #818181;
}

.login-bottom {
    padding: 5px;
}

.login-bottom p {
    margin: 0;
    text-align: center
}
</style>